<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>更新患者信息</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
</head>
<body style="background-color:#fff;">
<div class="layui-fluid">
    <!-- 添加 -->
    <div class="layui-row">
        <fieldset class="layui-elem-field site-demo-button layui-col-md-offset2 layui-col-md8"
                  style="margin-top: 30px;padding:15px;">
            <legend>更新患者信息</legend>
            <form class="layui-form layui-form-pane" lay-filter="update-patient" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">患者姓名</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="pid">
                        <input type="text" name="name" autocomplete="off" placeholder="请填写患者姓名"
                               class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input type="text" name="birth" id="birthday" placeholder="请填写患者出生日期"
                               autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="1" title="男">
                        <input type="radio" name="sex" value="0" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-block">
                        <input type="text" name="idcard" placeholder="请填写患者身份证号码"
                               autocomplete="off" class="layui-input" lay-verify="required|idcard">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" placeholder="请填写患者手机号码"
                               autocomplete="off" class="layui-input" lay-verify="required|mobile">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">住址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" placeholder="请填写患者住址"
                               autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit="" lay-filter="update-patient">更新患者</button>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>
</div>


<script src="../../../layui/layui.js"></script>
<script>
    layui.use(['jquery', 'form', 'laydate'], function () {
        var $ = layui.jquery; //注册 jquery 组件
        var form = layui.form;  //注册 form 组件
        var laydate = layui.laydate;  //注册 table 组件

        //日期
        laydate.render({
            elem: '#birthday'
        });

        // 当前地址
        var url = window.location.href;
        // 获取 patient 对象数据
        var patientStr = url.substring(url.lastIndexOf('=') + 1);

        // 使用 decodeURI 函数，对上述 patient json 字符串进行解码
        var patient = JSON.parse(decodeURI(patientStr));

        // 患者表单数据的回显
        form.val("update-patient", { //update-patient 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "id": patient.id // "name": "value"
            , "name": patient.name // "name": "value"
            , "birth": patient.birth
            , "sex": patient.sex
            , "idcard": patient.idcard
            , "mobile": patient.mobile
            , "address": patient.address
        });
        //添加表单验证
        form.verify({
            idcard: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$").test(value)) {
                    return '无效的身份证号码';
                }
            }
            , mobile: function (value, item) {//value：表单的值、item：表单的DOM对象
                if (!new RegExp("0?(13|14|15|18|17)[0-9]{9}").test(value)) {
                    return '无效的手机号码';
                }
            }
        });

        //更新患者表单提交
        form.on('submit(update-patient)', function (data) {
            console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })
</script>
</body>
</html>
